<template>
  <el-carousel :height="height + 'px'" arrow="never" autoplay>
    <el-carousel-item v-for="item in data" :key="item[props.id]">
      <router-link :to="item[props.linkUrl]">
        <img :src="item[props.imageUrl]" />
      </router-link>
    </el-carousel-item>
  </el-carousel>
</template>

<script setup lang="ts">
type bannerProps = {
  id: string
  linkUrl: string
  imageUrl: string
}
withDefaults(
  defineProps<{
    height: string
    data: any[]
    props: bannerProps
  }>(),
  {
    props: () => ({
      id: 'id',
      linkUrl: 'linkUrl',
      imageUrl: 'imageUrl',
    }),
  },
)
</script>

<style scoped lang="scss">
img {
  background-color: #eee;
}
</style>
